<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile" contentType="text/html"
	renderKitId="PRIMEFACES_MOBILE">

	<pm:page title="Smart Home Arduino">

		<!-- Groups -->
 	<pm:view id="groups" swatch="c">
			<pm:header title="Smart Home Arduino" />
			<pm:content>
				<h:form id="groupsForm">
					<p:dataList>
						<p:column>
							<p:commandLink value="Overview" action="pm:overview" />
						</p:column>
						<p:column>
							<p:commandLink value="Commands" action="pm:commands" />
						</p:column>
					</p:dataList>
				</h:form>
			</pm:content>
		</pm:view>

		<!-- Details -->
 	<pm:view id="overview" swatch="c">
			<pm:header title="Smart Home Arduino">
				<f:facet name="left">
					<p:button value="Back" icon="back" onclick="history.back()" />
				</f:facet>
			</pm:header>
			<pm:content>
				<p:dataTable var="sensor" value="#{sensorsBean.sensorsList}">
					<p:column headerText="Sensor Id">
						<h:outputText value="#{sensor.sensorId}"></h:outputText>
					</p:column>
					<p:column headerText="Sensor value">
						<h:outputText value="#{sensor.value}" />
					</p:column>
					<p:column headerText="Timestamp">
						<h:outputText value="#{sensor.timestamp}" />
					</p:column>
				</p:dataTable>
			</pm:content>
		</pm:view>
		
		<pm:view id="commands" swatch="c">
			<pm:header title="Smart Home Arduino">
				<f:facet name="left">
					<p:button value="Back" icon="back" onclick="history.back()" />
				</f:facet>
			</pm:header>
			<pm:content>
			<h:form>
				<p:outputPanel autoUpdate="true">
				<p:inputText value="#{commandsBean.commandToSend}" required="true"/>
				<p:commandButton value="Send" action="#{commandsBean.send}"/>
				</p:outputPanel>
			</h:form>
			</pm:content>
		</pm:view>

	</pm:page>
</f:view>